<template>
  <div>
    <div class="title">
      <van-icon name="arrow-left"
                class="lefticon"
                @click="goBack()" />
      <p>支付</p>
    </div>
    <div class="detail">
      <ul class="detail-ul">
        <li>维普论文检测系统是维普资讯自主研发的针对大学生、研究生、硕士、博士毕业论文、学位论文、职称论文的相似度、抄袭、引用过度情况进行检测的系统。为教育机构、科研单位、各级论文评审单位和发表单位提供了论文原创性和新颖性评价的重要依据。<font color="#0000FF">支持中文、英文、日文检测。</font>
        </li>
      </ul>
      <section>
        <section>
          <section class="yead">
            <section>
              <span class="yead1">温馨提示</span>
            </section>
            <section class="yead3">
              <p>由于检测需要上传论文，手机无法操作，如需上传论文请打开电脑版 https://wx.lianwen.com 提交论文检测。</p>
            </section>
          </section>
        </section>
      </section>
      <form action="https://wx.lianwen.com/m/mobile/pay_phone"
            method="POST">
        <ul class="yeadprice">
          <li class="yeadli1">
            <b>维普检测</b>
            <div>单价：3.00元/件</div>
          </li>
          <li class="yeadli2">
            <div>总价：￥555</div>
          </li>
        </ul>
        <ul class="yeadpaystyle">
          <li>
            <h4>选择支付方式</h4>
          </li>
          <input type="hidden"
                 name="counts"
                 value="100">
          <input type="hidden"
                 name="money"
                 value="10.00">
          <input type="hidden"
                 name="phone"
                 value="13232323232">
          <li><label><input id="pay1"
                     name="paytype"
                     type="radio"
                     class="radio"
                     value="alipay"
                     checked=""><span class="ca-channel-icon"
                    style="background-image: url('/asset/img/p_alipay_sdk.png');"></span>支付宝<small style="display:block">推荐支付宝用户使用</small></label></li>
        </ul>
        <ul class="yeadpay">
          <li @click="toPay">支付</li>
          <input type="submit">
        </ul>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderid: '',
      words: '',
      price: "",
    }
  },
  created () {
    console.log(this.$route.params.orderid)
    this.orderid = this.$route.params.orderid
    this.$http.getPrice(this.orderid).then(resp => {
      console.log(resp)
      this.words = resp.doc.words
      this.price = resp.doc.price
      console.log(this.words)
    })

  },
  methods: {
    goBack () {
      this.$router.back();
    },
    toPay () {
      const params = new URLSearchParams();
      params.append("counts", this.words)
      params.append("money", this.price)
      params.append("phone", '13232323232')
      params.append("paytype", "alipay")
      this.$http.getTopay(params).then(resp => {
        console.log(resp)
      })
    }
  }
}
</script>

<style scoped>
.title {
  display: flex;
  background: #228ef7;
}
.lefticon {
  line-height: 0.8rem;
  padding: 0 0.3rem;
  color: #fff;
  font-size: 0.4rem;
}
.title p {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #fff;
  flex: 0.85;
}
.detail {
  margin-top: 0.3rem;
  background-color: #fff;
}
.detail-ul {
  background: #fff;
  margin-bottom: 0.2rem;
  border-bottom: 0.02rem solid #f0f1f5;
}
.detail-ul li {
  line-height: 0.5rem;
  padding: 0.3rem 0.3rem;
  text-indent: 1.5em;
  color: #333333;
}
.yead {
  margin-top: 0.57rem;
  background: #fff;
  padding: 0.5em 0px;
  white-space: normal;
  border-style: solid none;
  border-top-width: 1px;
  border-top-color: #228ef7;
  display: block;
  font-size: 1em;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  text-decoration: inherit;
  color: rgb(166, 166, 166);
  border-bottom-width: 1px;
  border-bottom-color: #228ef7;
  box-sizing: border-box;
  border-bottom: 0.25rem solid #f0f1f5;
}
.yead section {
  margin-top: -1.2em;
  text-align: center;
  padding: 0;
  border: none;
  line-height: 1.4;
  box-sizing: border-box;
}
.yead1 {
  border-color: #228ef7;
  color: rgb(255, 255, 255);
  font-family: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: inherit;
  padding: 8px 23px;
  text-align: center;
  text-decoration: inherit;
  background-color: #228ef7;
}
.yead3 {
  padding: 0.3rem;
  padding-bottom: 0;
  color: #202020;
}
.yead3 p {
  margin: 0.6rem 0;
  white-space: normal;
  text-align: left;
  font-size: 1em;
  text-indent: 1.5em;
}
.yeadprice {
  border-bottom: 0.3rem solid #f0f1f5;
  padding: 0.3rem 0.3rem;
}
.yeadli1 {
  display: flex;
  justify-content: space-between;
}
.yeadli2 {
  margin-top: 0.3rem;
}
.yeadpaystyle {
  border-bottom: 0.3rem solid #f0f1f5;
}
.yeadpay {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
}
.yeadpay li {
  background: #228ef7;
  color: #fff;
}
</style>